<template lang="">
    <div>
        <van-nav-bar title="可加的项目" > 
        </van-nav-bar>

        <div class="item-list">
            <div class="item" v-for="(item,index) in researchs" :key="index">
                <div class="item-title">{{item.title}}</div>
                <div class="item-detail">
                    <div class="item-left">
                        <div class="item-people">
                            <div class="people-left">参研人员</div>
                            <div class="people-right">{{item.research_nums}}人</div>
                        </div>
                        <div class="item-people">
                            <div class="people-left">受试人数</div>
                            <div class="people-right">{{item.patient_nums}}人</div>
                        </div>
                    </div>
                    <div class="item-right" @click="goToDetail(item.id)">
                       查看项目 
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ref, reactive,onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getPatientResearch} from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();
        const researchs = ref([])
        const waitIds = ref([])
        let pid = 0;

        const getData = () => {
            getPatientResearch({id:pid}).then(res => {
                if(res.status == 'ok'){
                    researchs.value = res.data
                }else{
                    showToast(res.msg)
                }
            })
        }

        onMounted(() => {
            pid = route.params.id ? route.params.id : 0
            if(!pid){
                router.push("/Patients")
            }

            getData()
        })
        const tab = ref('zl')
        const otherProject = () => {
            
        }
        const goToDetail = (id) => {
            router.push("/KyDetail/"+id)
        }
        return {
            tab,
            researchs,
            goToDetail
        }
    }
}
</script>
<style scoped>
.item-list{
    padding: 15px;
    display: flex;
    flex-direction: column;
}
.item{
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #E3E4E5;
}

.item-title{
    padding-bottom: 12px;
}

.item-detail{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.item-people{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 250;
}

.people-left{
    margin-right: 20px;
}

.item-right{
    color:#0052D9; 
    font-size:14px
}
</style>